import React, { Component } from "react";
import { Text, View, StyleSheet, TouchableOpacity } from "react-native";
import { DatePicker } from "react-native-common-date-picker";
import Constant from  '../../utils/Constant'
import moment from 'moment';

export default class DatePickerPart extends Component {
    constructor(props) {
        super(props)
        this.state = {
            date: new Date(),
            showDatePicker: props.show,
            today: '',
            maxDate: '',
        }
    }
    componentDidUpdate(props) {

    }
    componentDidMount(props) {
        const now = new Date();
        const max = new Date();
        let maxDate = max.setFullYear(now.getFullYear() + 2);
        let today = moment(now).format("YYYY-MM-DD")
        let maxDateString = moment(maxDate).format("YYYY-MM-DD")
        this.setState({
            today: today,
            maxDate: maxDateString,
        })
    }
    onChange(date) {
        this.setState({
            date: date
        })
    }

    render() {
        return (
            <>
                {this.props.show && (
                    <View style={styles.dateContainer}>
                        <TouchableOpacity activeOpacity={1} style={styles.mask} onPress={() => this.props.changeState(!this.props.show)}></TouchableOpacity>
                        <View style={[styles.pickerBox, {paddingBottom: Constant.bottomHeight,}]}>
                            <DatePicker
                                defaultDate={this.props.defaultDate ? this.props.defaultDate:this.state.today}
                                maxDate={this.state.maxDate}
                                backgroundColor={'white'}
                                type={this.props.type?this.props.type:'YYYY-MM'}
                                yearSuffix={'年'}
                                monthSuffix={'月'}
                                daySuffix={'日'}
                                cancelText={'取消'}
                                confirmText={'确定'}
                                toolBarCancelStyle={styles.operateText}
                                toolBarConfirmStyle={[styles.operateText, styles.operateConfirm]}
                                cancel={()=>{
                                    this.props.changeState(!this.props.show)
                                }}
                                confirm={date => {
                                    this.props.changeState(!this.props.show)
                                    this.props.changeDate(date)
                                }}
                            />
                        </View>
                    </View>
                )}

            </>
        )
    }
}
const styles = StyleSheet.create({
    // 日期选择部分
    dateContainer: {
        position: 'absolute',
        left: 0,
        right: 0,
        top: 0,
        bottom: 0,
        zIndex: 1000,
    },
    mask: {
        position: 'absolute',
        left: 0,
        right: 0,
        top: 0,
        bottom: 0,
        backgroundColor: 'rgba(0,0,0,0.5)'
    },
    pickerBox: {
        position: 'absolute',
        bottom: 0,
        width: '100%',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#ffffff',
    },
    operatePart: {
        width: '100%',
        height: 40,
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        borderBottomColor: '#e1e1e1',
        borderBottomWidth: 0.5
    },
    operateBtn: {
        height: '100%',
        paddingLeft: 15,
        paddingRight: 15,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center'
    },
    datePicker: {
        width: 350
    },
    dateCloseBtn: {
        position: 'absolute',
        top: -40,
        right: 0,
        width: 40,
        height: 40,
        backgroundColor: '#ff8866'
    },
    operateText: {
        fontSize: 16
    },
    operateConfirm: {
        color: '#2C8AFC'
    }
})